import {useNavigate} from "react-router-dom";
import React from "react";
import ShareLocationOutlinedIcon from "@mui/icons-material/ShareLocationOutlined";
import {Button} from "@mui/material";

interface SearchBoxProps {
    selectedCity: string | undefined
}

const SearchBox = ({selectedCity}: SearchBoxProps) => {

    const navigate = useNavigate();

    const handleCityButtonClick = () => {
        // 点击按钮时跳转到城市选择页面
        navigate('/CityList');
    };


    return (
        <div style={{
            position: 'absolute',
            top: '20px',
            left: '50%',
            transform: 'translateX(-50%)',
            background: 'transparent',
            display: 'flex',
            zIndex: 100,  // 设置较小的 z-index
            height: '30px', // 调整搜索框的高度
        }}>
            {/* 左侧可选城市列表和中间输入框 */}
            <div style={{display: 'flex', backgroundColor: 'white'}}>
                {/* 左侧城市选择按钮 */}
                <Button variant="outlined" onClick={handleCityButtonClick}
                        style={{backgroundColor: 'white', border: 'none', color: 'black'}}>
                    {selectedCity || '城市'}
                </Button>

                {/* 中间输入框 */}
                <input type="text"
                       style={{border: '1px solid #ccc'}}
                       placeholder={"请输入小区或地址"}/>
            </div>

            {/* 右侧地图标志 */}
            <div style={{flex: 1, background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center'}}>
                <ShareLocationOutlinedIcon style={{fontSize: '30px', color: 'white', alignItems: 'center'}}/>
            </div>

        </div>
    );
};

export default SearchBox